<template>
  <div id="all">
    <div class="left"><van-checkbox :value="item.isChecked" @click="handleSelected"></van-checkbox></div>
    <div class="middle">
      <img :src="item.goods.goods_image">
    </div>
    <div class="right">
      <div class="top">
        {{ item.goods.goods_name }}
      </div>
      <div class="bottom">
        <div class="price" style="color:red">
          ￥{{ item.goods.line_price_min }}
        </div>
        <count-goods :value="item.goods_num" @input="(goodsNum) => changeCartNum(item.goods_id, goodsNum, item.goods_sku_id)"></count-goods>
      </div>
    </div>
  </div>
</template>

<script>
import CountGoods from './CountGoods.vue'
export default {
  data () {
    return {
      checked: false,
      buyCount: 1
    }
  },
  props: {
    item: Object
  },
  methods: {
    // 是否选中
    handleSelected () {
      this.$store.commit('cart/handleSelected', this.item.goods_id)
    },
    // 异步修改购物车数量
    changeCartNum (goodsId, goodsNum, goodsSkuId) {
      this.$store.dispatch('cart/addGoods', {
        goodsId,
        goodsNum,
        goodsSkuId
      })
      console.log(goodsNum)
    }
  },
  components: {
    CountGoods
  }
}
</script>

<style scoped>
#all {
  margin:10px;
  height:100px;
  background:white;
  display:flex;
  justify-content:space-around;
  align-items:center;
  border-radius:10px;
}
#all .middle img{
  height:80px;
}
#all .right .top {
  height:30px;
  font-size:12px;
  overflow:hidden;
  /* text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical; */
}
.right .bottom {
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end
}
</style>
